<template>
    <div class="TaskManagement">
        <BigImg :visible="photoVisible" :url="bigImgUrl" @closeClick="() => { photoVisible = false }"></BigImg>
        <!-- 左侧——数据校验首页列表 -->
        <div class="TaskManagement_left" style="width: 400px;">
            <div class="TaskManagement_left_top">
                <div class="TaskManagement_left_top_name">
                    <div class="icon_box">
                        <i class="iconfont icon-yueyongdianliangbili"></i>
                    </div>

                    <div class="name">列表</div>
                </div>
                <div class="TaskManagement_left_top_btn">
                    <i class="iconfont icon-xinjianchuangkou" style="font-size:22px"></i>
                </div>
            </div>
            <!-- 表头信息 -->
            <div class="TaskManagement_left_center">
                <div>1 个任务在6 分钟前更新</div>
                <div>
                    <i class="iconfont icon-gonggeshitu" style="font-size:22px"></i>
                    <i class="iconfont icon-shuaxin1" style="font-size:22px"></i>
                </div>
            </div>
            <!-- 搜索 -->
            <div class="TaskManagement_left_search">
                <a-input-search placeholder="搜索此列表" @search="onSearch" />
            </div>
            <!-- 任务列表 -->
            <div class="TaskManagement_left_list">
                <div class="TaskManagement_left_list_header">
                    <div>
                        任务列表
                        <i class="iconfont icon-paixu2"></i>
                    </div>
                    <div class="right">
                        <a-dropdown style="display:flex; align-items: center;">
                            <a class @click.prevent>
                                <div class="select" style="color:#999;font-size:14px">状态</div>
                                <a-icon type="down" />
                            </a>
                            <template #overlay>
                                <!-- 状态 -->
                                <a-menu @click="onClickHleader">
                                    <a-menu-item key="1">通过</a-menu-item>
                                    <a-menu-item key="3">未通过</a-menu-item>
                                    <a-menu-item key="2">校验中</a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown>
                    </div>
                </div>
                <!-- 任务列表信息 -->
                <div class="TaskManagement_left_list_box scrollbar">
                    <ul>
                        <li>
                            <div style="white-space: nowrap;">张三的任务</div>
                            <div>admin</div>

                            <div class="right">
                                <div>77.78%</div>
                                <div>
                                    2023/11/30
                                </div>
                            </div>
                        </li>
                        <li v-for="(item, index) in 10" :key="index">
                            <div style="white-space: nowrap;">王{{ index + 1 }}的任务</div>
                            <div>admin</div>

                            <div class="right">
                                <div>{{ Math.round(Math.random() * 99) }}%</div>
                                <div>
                                    2023/11/30
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import BigImg from "@/components/Tools/BigImg.vue";


export default {
    data() {
        return {
            photoVisible: false,
            bigImgUrl: "",

            activeKey: ["0", "1", "2"],
            data: [{
                title: "附件1"
            },
            {
                title: "附件2"
            },
            {
                title: "附件3"
            },
            {
                title: "附件4"
            }
            ]
        };
    },
    components: {
        BigImg,
    },
    computed: {

    },
    methods: {

        // 搜索列表
        onSearch() { },

        // 状态
        onClickHleader() { }
    }
};
</script>

<style lang="scss">
//@import "@/assets/css/taskManagement.scss";
@import "@/assets/css/scrollbar.scss";

.TaskManagement {
    display: flex;
    flex-direction: row;
    height: 100%;

    .TaskManagement_left {
        width: 200px;
        height: 100%;
        background: #fff;
        margin-right: 10px;
        padding: 10px;
        border-radius: 5px;
        // overflow: hidden;
        border-right: 5px solid #eee;
        display: flex;
        flex-direction: column;

        .TaskManagement_left_top {
            height: 40px;
            display: flex;
            flex: row;
            justify-content: space-between;
            align-items: center;

            .TaskManagement_left_top_name {
                display: flex;
                flex-direction: row;
                align-items: center;

                .icon_box {
                    width: 40px;
                    height: 40px;
                    background: #4bc076;
                    border-radius: 5px;

                    i {
                        color: #fff;
                        font-size: 26px;
                    }
                }

                .name {
                    margin-left: 6px;
                    font-size: 18px;
                    font-weight: 600;
                }
            }

            .TaskManagement_left_top_btn {
                color: #747474;

                i {
                    transition: .2s;
                    cursor: pointer;
                    color: #999;

                    &:hover {
                        transition: .2s;
                        color: #333;
                    }
                }

            }
        }

        .TaskManagement_left_center {
            height: 40px;
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;

            i {
                color: #999;
                margin-left: 8px;
                cursor: pointer;
                transition: .2s;

                &:hover {
                    color: #333;
                    transition: .2s;
                }
            }
        }

        .TaskManagement_left_search {
            height: 40px;
        }

        .TaskManagement_left_list {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;

            .TaskManagement_left_list_header {
                height: 36px;
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding-left: 10px;
                background: #f3f3f3;
                // border-radius: 5px;
                border-bottom: 1px solid #cdcdcd;

                i {
                    font-size: 16px;
                    margin-left: 2px;
                    cursor: pointer;
                    color: #999;
                    transition: .2s;

                    &:hover {
                        color: #333;
                        transition: .2s;
                    }
                }

                .right {
                    margin-right: 10px;
                }
            }

            .TaskManagement_left_list_box {
                flex: 1;
                overflow-y: auto;

                ul {
                    display: flex;
                    flex-direction: column;

                    li {
                        flex-wrap: nowrap;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 10px 10px;
                        border-bottom: 1px solid #f3f3f3;

                        .right {
                            text-align: right;
                        }

                        &:hover {
                            background: #f3f3f3;
                            cursor: pointer;
                        }
                    }
                }

            }
        }
    }




}
</style>



